<template>
 <div>
  <baidu-map v-for="(item,index) in position" :key="index "
   class="map" :center="{lng: item.lng, lat:  item.lat}" :zoom="12" >
    <my-overlay
    v-for="(item,index) in position" :key="index"
      :position="{lng: item.lng, lat: item.lat}"
      :item="item"
      :active="active"
      @details="details"
      >
    </my-overlay>
    <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
    <bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>
  </baidu-map>
 </div>
</template>
<script>
import { mapAPI, cityHouseAPI } from '@/api/index.js'
import MyOverlay from '@/views/map/MyOverlay.vue'
export default {
  components: {
    MyOverlay
  },
  data () {
    return {
      active: false,
      // 接口数据
      mapList: [], // latitude  longitude
      position: [],
      houseCode: []
    }
  },
  methods: {
    async details (val) {
      const { data: res } = await cityHouseAPI({ cityId: val.value })
      this.houseCode = res.body.list
      window.localStorage.setItem('houseValue', res.body.list.houseCode)
      this.houseCode.forEach(item => {
        console.log(item.houseCode)
        window.localStorage.setItem('houseValue', item.houseCode)
      })
      const { data: res2 } = await mapAPI({ id: '17f6797e-972b-1ebc' })
      console.log(res2)
    }
  },
  async created () {
    const { data: res } = await mapAPI({ id: window.localStorage.getItem('value') })
    this.mapList = res.body
    this.mapList.forEach(item => {
      this.position.push({ lng: item.coord.longitude, lat: item.coord.latitude, label: item.label, value: item.value, count: item.count })
    })
  }

}
</script>

<style lang="less" scoped>
.map {
  width: 100%;
  height: 100vh;
}
.sample {
    width: 70px;
    height: 70px;
    line-height: 1;
    display: inline-block;
    position: absolute;
    border-radius: 100%;
    background: rgba(12,181,106,.9);
    color: #fff;
    border: 2px solid hsla(0,0%,100%,.8);
    text-align: center;
    cursor: pointer;
}
.sample.active {
  background: rgba(0,0,0,0.75);
  color: #fff;
}
</style>
